<template>
  <div id="app">
    <header>
      <h1>商品列表</h1>
    </header>
    <main class="main-container">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="分类" name="category">
          <div class="content">
            <div class="category-list">
              <div
                v-for="category in categories"
                :key="category.id"
                class="category-item"
                @click="fetchProducts(category.id)"  
              >
                <h2>{{ category.name }}</h2>
                <p>{{ category.description }}</p>
              </div>
            </div>

            <div class="product-list">
              <div v-if="loading">加载中...</div>
              <div v-else-if="error">{{ error }}</div>
              <div v-else>
                <div class="product" v-for="product in products" :key="product.id">
                  <h2>{{ product.name }}</h2>
                  <p>价格: ¥{{ product.price }}</p>
                  <p>库存: {{ product.count }}</p>
                  <p>厂家: {{ product.manufacturer }}</p>
                  <p>描述: {{ product.description }}</p>
                  <img :src="product.images || 'placeholder.jpg'" :alt="product.name" />
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="品牌" name="brand">
          <div class="brand-list">
            <div
              v-for="brand in brands"
              :key="brand.id"
              class="brand-item"
              @click="fetchProductsByBrand(brand.id)"
            >
              <h2>{{ brand.name }}</h2>
              <p>{{ brand.description }}</p>
            </div>
          </div>

          <div class="product-list">
            <div v-if="loading">加载中...</div>
            <div v-else-if="error">{{ error }}</div>
            <div v-else>
              <div class="product" v-for="product in products" :key="product.id">
                <h2>{{ product.name }}</h2>
                <p>价格: ¥{{ product.price }}</p>
                <p>库存: {{ product.count }}</p>
                <p>厂家: {{ product.manufacturer }}</p>
                <p>描述: {{ product.description }}</p>
                <img :src="product.images || 'placeholder.jpg'" :alt="product.name" />
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElTabs, ElTabPane } from 'element-plus';
import 'element-plus/es/components/tabs/style/css';
import 'element-plus/es/components/tab-pane/style/css';

const activeTab = ref('category'); // 控制当前激活的标签页
const categories = ref([]); // 存储类别数据
const brands = ref([]); // 存储品牌数据
const products = ref([]); // 存储商品数据
const loading = ref(true); // 控制加载状态
const error = ref(null);

// 获取类别数据的函数
const fetchCategories = async () => {
  try {
    const response = await axios.get('http://127.0.0.1:8000/goods/category/');
    if (response.data.code === 200) {
      categories.value = response.data.data;
      if (categories.value.length > 0) {
        fetchProducts(categories.value[0].id); // 默认加载第一个类别的商品
      }
    } else {
      error.value = '获取商品类别失败，请稍后重试。';
    }
  } catch (err) {
    error.value = '网络错误或服务器不可用。';
  }
};

// 获取品牌数据的函数
const fetchBrands = async () => {
  try {
    const response = await axios.get('http://127.0.0.1:8000/goods/brand/');
    if (response.data.code === 200) {
      brands.value = response.data.data;
    } else {
      error.value = '获取品牌数据失败，请稍后重试。';
    }
  } catch (err) {
    error.value = '网络错误或服务器不可用。';
  }
};

// 根据类别 ID 获取商品数据的函数
const fetchProducts = async (categoryId) => {
  loading.value = true; // 开始加载
  try {
    const response = await axios.get(`http://localhost:8000/goods/products/${categoryId}/`);
    if (response.data.code === 200) {
      products.value = response.data.data; // 更新商品数据
    } else {
      error.value = '未能获取商品数据';
    }
  } catch (err) {
    error.value = '加载失败，请重试。';
  } finally {
    loading.value = false; // 加载结束
  }
};

// 根据品牌 ID 获取商品数据的函数
const fetchProductsByBrand = async (brandId) => {
  loading.value = true; // 开始加载
  try {
    const response = await axios.get(`http://localhost:8000/goods/brands/${brandId}/`);
    if (response.data.code === 200) {
      products.value = response.data.data; // 更新商品数据
    } else {
      error.value = '未能获取该品牌下的商品数据';
    }
  } catch (err) {
    error.value = '加载失败，请重试。';
  } finally {
    loading.value = false; // 加载结束
  }
};

// 页面加载完成后调用
onMounted(async () => {
  await fetchCategories();
  await fetchBrands();
});
</script>

<style scoped>
/* 主容器样式 */
#app {
  font-family: Arial, sans-serif;
  padding: 2rem;
  background-color: #f7fafc; /* 更柔和的背景色 */
  min-height: 100vh;
}

header {
  text-align: center; /* 标题居中 */
  margin-bottom: 20px;
  color: #3498db;
}

.content {
  display: flex; /* 使用 Flexbox */
  gap: 2rem; /* 项目之间的间距 */
}

.category-list {
  width: 30%; /* 类别宽度 */
}

.product-list {
  width: 70%; /* 商品列表宽度 */
}

/* 卡片样式 */
.category-item, .brand-item {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加动画 */
  text-align: left;
}

.category-item:hover, .brand-item:hover {
  transform: translateY(-5px); /* 悬浮动画 */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.category-item h2, .brand-item h2 {
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.category-item p, .brand-item p {
  color: #666;
  font-size: 1rem;
  line-height: 1.5;
}

/* 商品样式 */
.product {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}
.product img {
  max-width: 100%;
  height: auto;
}
.product h2 {
  font-size: 1.5em;
  margin: 0;
}
.product p {
  margin: 5px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content {
    flex-direction: column; /* 小屏幕时垂直布局 */
  }
  .category-list, .product-list {
    width: 100%; /* 100%宽度 */
  }
}
</style>
